<template>
  <view>
    <!-- 顶部自定义导航，抽离成公共组件，所有页面复用 -->
    <CustomNavbar
    />

    <!-- 全局加载遮罩（在数据载入完成前显示） -->
    <view v-if="!isLoaded" class="loading-overlay">
      <view class="loading-box">
        <view class="spinner">
          <view class="dot" v-for="n in 3" :key="n"></view>
        </view>
        <view class="loading-text">数据加载中...</view>
      </view>
    </view>

    <!-- 赛道：全国大师，岗位：摄影师，才展示-->
    <PublicContentLayout v-if="showRules1">
      <image src="/static/rules1/1.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules1/2.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules1/3.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules1/4.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules1/5.jpg" mode="widthFix" style="width: 100%;"></image>
    </PublicContentLayout>
    <!-- 赛道：全国云端，岗位：修图师，才展示-->
    <PublicContentLayout v-if="showRules2">
      <image src="/static/rules2/1.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules2/2.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules2/3.jpg" mode="widthFix" style="width: 100%;"></image>
    </PublicContentLayout>
    <!-- 赛道：全国大师，岗位：造型顾问，才展示-->
    <PublicContentLayout v-if="showRules3">
      <image src="/static/rules3/1.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules3/2.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules3/3.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules3/4.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules3/5.jpg" mode="widthFix" style="width: 100%;"></image>
    </PublicContentLayout>
    <!-- 赛道：全国蓝标，岗位：造型顾问，才展示-->
    <PublicContentLayout v-if="showRules4">
      <image src="/static/rules4/1.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules4/2.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules4/3.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules4/4.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules4/5.jpg" mode="widthFix" style="width: 100%;"></image>
    </PublicContentLayout>
    <!-- 赛道：全国蓝标，岗位：摄影师，才展示-->
    <PublicContentLayout v-if="showRules5">
      <image src="/static/rules5/1.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules5/2.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules5/3.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules5/4.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules5/5.jpg" mode="widthFix" style="width: 100%;"></image>
    </PublicContentLayout>
    <!-- 赛道：全国蓝标、全国大师，岗位：看片师，才展示-->
    <PublicContentLayout v-if="showRules6">
      <image src="/static/rules6/1.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules6/2.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules6/3.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules6/4.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules6/5.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules6/6.jpg" mode="widthFix" style="width: 100%;"></image>
    </PublicContentLayout>
    <!-- 赛道：全国蓝标、全国大师，岗位：服务管家，才展示-->
    <PublicContentLayout v-if="showRules7">
      <image src="/static/rules7/1.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules7/2.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules7/3.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules7/4.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules7/5.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules7/6.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules7/7.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules7/8.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules7/9.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules7/10.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules7/11.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules7/12.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules7/13.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules7/14.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules7/15.jpg" mode="widthFix" style="width: 100%;"></image>
      <image src="/static/rules7/16.jpg" mode="widthFix" style="width: 100%;"></image>
    </PublicContentLayout>
  </view>
</template>

<script>
import CustomNavbar from '@/components/CustomNavbar.vue'
import PublicContentLayout from '@/components/PublicContentLayout.vue'
export default {
  data() {
    return {
      // track and role will be filled from route/query or storage
      track: '',
      role: '',
      isInitialRound: true,
      isRehearsalRound: true,
      isLoaded: false,
    };
  },
  computed: {
    showRules1() { return this.track === '全国大师' && this.role === '摄影师'; },
    showRules2() { return this.track === '全国云端' && this.role === '修图师'; },
    showRules3() { return this.track === '全国大师' && this.role === '造型顾问'; },
    showRules4() { return this.track === '全国蓝标' && this.role === '造型顾问'; },
    showRules5() { return this.track === '全国蓝标' && this.role === '摄影师'; },
    showRules6() { return (this.track === '全国蓝标' || this.track === '全国大师') && this.role === '看片师'; },
    showRules7() { return (this.track === '全国蓝标' || this.track === '全国大师') && this.role === '服务管家'; },
  },
  created() {
    // Support SPA style routing (this.$route)
    try {
      const routeSource = (this.$route && (this.$route.query || this.$route.params)) || {};
      this.track = routeSource.track || routeSource.trackName || (routeSource.query && routeSource.query.track) || this.track || '';
      this.role = routeSource.role || routeSource.position || (routeSource.query && routeSource.query.role) || this.role || '';
      this.normalizeTrackAndRole();
    } catch (e) {}

    // fallback to uni/dd storage if available
    if (!this.track || !this.role) {
      try {
        if (typeof uni !== 'undefined') {
          this.track = this.track || uni.getStorageSync('track') || '';
          this.role = this.role || uni.getStorageSync('role') || '';
        } else if (typeof dd !== 'undefined' && typeof dd.getStorageSync === 'function') {
          // some miniapp envs expose dd.getStorageSync
          this.track = this.track || dd.getStorageSync('track') || '';
          this.role = this.role || dd.getStorageSync('role') || '';
        }
        this.normalizeTrackAndRole();
      } catch (e) {}
    }
  },

  // For miniapp navigation: options contains query params
  onLoad(options) {
    try {
      if (options && (options.track || options.role || options.trackName || options.position)) {
        this.track = options.track || options.trackName || this.track || '';
        this.role = options.role || options.position || this.role || '';
        this.normalizeTrackAndRole();
      }
    } catch (e) {}

    // mark loaded after initial params are applied
    try { this.isLoaded = true; } catch (e) {}
  },

  watch: {
    // react to route changes in SPA mode
    '$route'(to) {
      try {
        const s = (to && (to.query || to.params)) || {};
        if (s) {
          this.track = s.track || s.trackName || this.track;
          this.role = s.role || s.position || this.role;
          this.normalizeTrackAndRole();
        }
      } catch (e) {}
    }
  },

  methods: {
    // Normalize and map incoming loose values to canonical labels used by computed props
    normalizeTrackAndRole() {
      try {
        if (this.track && typeof this.track === 'string') {
          const t = this.track.trim();
          if (/蓝标/.test(t)) this.track = '全国蓝标';
          else if (/大师/.test(t)) this.track = '全国大师';
          else if (/云/.test(t)) this.track = '全国云端';
          else this.track = t;
        }
        if (this.role && typeof this.role === 'string') {
          const r = this.role.trim();
          if (/摄影/.test(r)) this.role = '摄影师';
          else if (/修图/.test(r)) this.role = '修图师';
          else if (/造型/.test(r)) this.role = '造型顾问';
          else if (/看片/.test(r)) this.role = '看片师';
          else if (/服务/.test(r) || /管家/.test(r)) this.role = '服务管家';
          else this.role = r;
        }
      } catch (e) {}
    },
  },
};
</script>

<style scoped>
image {
  display: block;
}

/* loading overlay */
.loading-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6,6,6,0.6);
  z-index: 3000;
}
.loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30rpx;
  border-radius: 20rpx;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}
.spinner {
  display: flex;
  gap: 12rpx;
  margin-bottom: 18rpx;
}
.dot {
  width: 22rpx;
  height: 22rpx;
  border-radius: 50%;
  background: linear-gradient(90deg,#E3CBB4,#A5836C);
  animation: pulse 900ms infinite ease-in-out;
}
.dot:nth-child(2) { animation-delay: 120ms; }
.dot:nth-child(3) { animation-delay: 240ms; }
@keyframes pulse {
  0% { transform: scale(0.7); opacity: 0.5; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(0.7); opacity: 0.5; }
}
.loading-text {
  color: #FDEBC2;
  font-size: 28rpx;
}
</style> 